<template>
  <div class='artices-card' v-infinite-scroll="load" infinite-scroll-delay="700"> 
    <!-- v-infinite-scroll="load" v-infinite-scroll="load" infinite-scroll-delay="700" -->
    <div class="artices-card-all" v-for="item in bloglistRef" :key="item.id" @click="routerpath(item.userId, item.id)">
      <div class="left">
        <div class="title">{{ item.title }}</div>
        <div class="content"> {{ item.content }} </div>
        <div class="ioc-div">
          <ul>
            <li class="l1">
              <img :src="item.user.avatar" alt="" class="lilteimg">
              <span>{{ item.user.nickname }}</span>
            </li>
            <li>
              文章类型
            </li>
            <li>
              <i class="iconfont icon-browse"></i>
              <span> {{ item.views }} </span>
            </li>
            <li>
              <i class="iconfont icon-comment"></i>
              <span class="span"> {{ item.commentCount }} </span>
            </li>
            <li>
              <i class="iconfont icon-dianzan"></i>
              <span class="span"> {{ item.likeCount }} </span>
            </li>
          </ul>
        </div>
      </div>
      <div class="right">
        <img src="../../assets/logo.png" alt="">
      </div>
    </div>
    <div>
      <loading size="mini" v-show="showloadingRef"></loading>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, getCurrentInstance, onMounted, ref } from 'vue'
import loading from '../../components/Loading/index.vue'
import { getBlogByScoreAPI,getBlogByScore2API } from '../../api/indexAPI'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: '',
  components:{
    loading
  },
  props: {
    type: {
      type: String
    }
  },
  setup (props: any) {
    // 显示loading
    const showloadingRef = ref<boolean>(false)
    // 博客列表
    const bloglistRef = ref<Array<any>>([])
    // 获取推荐博客
    const gettuijianblog = async () => {
      const res = await getBlogByScoreAPI()
      bloglistRef.value = res.data.data
    }
    const load = async () => {
      showloadingRef.value = true
      const res = await getBlogByScoreAPI()
      if (res.data.code === 200) {
        bloglistRef.value.push(...res.data.data)
        showloadingRef.value = false
      }
    }
    // routerpath路由跳转
    const router = useRouter()
    const routerpath = (userID: number, aritcesId: number) => {
      let { href } = router.resolve({
        name: 'aritces',
        query: {
          userID,
          aritcesId
        }
      })
      window.open(href, '_blank')
    }
    

    onMounted(() => {
      gettuijianblog()
    })
    return {
      bloglistRef,
      showloadingRef,
      load,
      routerpath
    }
  }
})
</script>

<style lang='scss' scoped>
.artices-card{
  width: 800px;
}
.artices-card-all{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f3f3f3;
  padding: 10px 0;
  cursor: pointer;
  .right{
    img{
      width: 117px;
      height: 88px;
    }
  }
}
.ioc-div{
  margin-top: 20px;
  height: 40px;
  ul{
    color: #99a2aa;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    .l1{
      display: flex;
      align-items: center;
      
    }
    li{
      margin-right: 15px;
    }
  }
}
.lilteimg{
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.title{
  font-size: 20px;
  color: #212121;
  height: 26.5px;
  transition: .3s;
  display: inline-block;
  vertical-align: top;
  -webkit-box-orient: vertical;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.title:hover{
  color: skyblue;
}
.content{
  width: 600px;
  height: 21px;
  margin-top: 4px;
  font-size: 12px;
  color: #99a2aa;
  letter-spacing: 0;
  line-height: 22px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>
